<!-- 课表的页面 -->
<template>
  <div class="cq_bottom_table" @click="visible = false">
    <div class="h_title sbFlex">
      <div class="h_title_l">
        节次管理<span style="font-size:14px;color:#999">（右击选择配置）</span>
      </div>
    </div>
    <div class="ss_box cenFlex">
      <div class="ss_box_title center">配置表</div>
      <div class="ss_box_con">
        <div class="ss_box_con_con cenFlex">
          <div class="ss_box_con_con_label"></div>
          <div
            class="ss_box_con_title_box cenFlex"
            v-for="week in 7"
            :key="'week' + week"
          >
            周{{ week == 7 ? '日' : $convertNum(week) }}
          </div>
        </div>
        <div class="ss_box_con_con" v-for="(item, ix) in sGradeList" :key="ix">
          <div class="ss_box_con_con_label">{{ item.gradeName }}</div>
          <div
            class=" cenFlex"
            :class="
              gradeItem.configShortName
                ? 'ss_box_con_con_box_act'
                : 'ss_box_con_con_box'
            "
            v-for="(gradeItem, index) in item.data"
            :key="'gradeItem' + index"
            @contextmenu.prevent="openMenu($event, gradeItem, index, ix)"
          >
            {{ gradeItem.configShortName || '配置' }}
            <ul
              v-if="
                visible &&
                  selectedTag.index == index &&
                  selectedTag.ix == ix &&
                  !selectedTag.configId
              "
              :style="{ left: left + 'px', top: top + 'px' }"
              class="contextmenu"
            >
              <li
                v-for="(section, ids) in emu.sectionList"
                :key="'section' + ids"
                @click.stop="changeSectionClass(section, item)"
              >
                {{ section.shortName }}
              </li>
            </ul>
            <ul
              v-if="
                visible &&
                  selectedTag.index == index &&
                  selectedTag.ix == ix &&
                  selectedTag.configId
              "
              :style="{ left: left + 'px', top: top + 'px' }"
              class="contextmenu"
            >
              <li @click.stop="delSectionClass">删除</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  adminSchoolTimetableGradeConfigList,
  adminSchoolTimetableGradeConfig,
  adminSchoolTimetableGradeConfigRemove
} from '@/api/lcmapi.js'

export default {
  props: {
    // 是否开启序号的展示
    emu: {
      type: [Object],
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      sGradeList: [],
      visible: false,
      top: 0,
      left: 0,
      selectedTag: {}
    }
  },

  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getadminSchoolTimetableGradeConfigList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {},
  methods: {
    // 获取当前配置表的配置
    async getadminSchoolTimetableGradeConfigList () {
      let res = await adminSchoolTimetableGradeConfigList({
        schoolId: this.$route.query.id
      })
      if (res[0]) {
        return
      }
      this.sGradeList = res[1].data
      this.sGradeList.splice(1, 0)
    },
    openMenu (e, item, index, ix) {
      const menuMinWidth = 105
      this.left = e.layerX // 15: margin right
      this.top = e.layerY
      this.visible = true
      this.selectedTag = { ...item, index, ix }
    },
    // 点击绑定课程
    async changeSectionClass (section, item) {
      let res = await adminSchoolTimetableGradeConfig({
        configId: section.id,
        gradeId: item.gradeId,
        schoolId: this.$route.query.id,
        weekDay: this.selectedTag.weekDay
      })
      if (res[0]) {
        return
      }
      this.$message.success('执行成功')
      this.getadminSchoolTimetableGradeConfigList()
      this.visible = false
    },
    // 点击删除绑定
    async delSectionClass (section) {
      let res = await adminSchoolTimetableGradeConfigRemove({
        id: this.selectedTag.gradeConfigId
      })
      if (res[0]) {
        return
      }
      this.$message.success('执行成功')
      this.getadminSchoolTimetableGradeConfigList()
      this.visible = false
    }
  }
}
</script>
<style lang="scss">
.flex {
  display: flex;
}
.content_box {
  padding: 20px 25px;
  background: #ffffff;
  border-radius: 6px;
  .h_title {
    padding: 16px 0px;
    padding-left: 20px;
    font-size: 18px;
    border-bottom: 1px #ececec solid;
  }
  .ss_box_title {
    width: 100%;
    font-size: 18px;
    margin-bottom: 25px;
  }
  .ss_box {
    flex-wrap: wrap;
  }
  .ss_box_con {
    position: relative;
    .ss_box_con_con {
      font-size: 16px;
      align-items: center;
      margin-bottom: 25px;
      display: flex;
    }
    .ss_box_con_title {
      font-size: 16px;
      align-items: center;
      margin-bottom: 25px;
      display: flex;
    }
    .ss_box_con_con_box,
    .ss_box_con_con_box_act {
      width: 80px;
      height: 34px;
      background: rgba(0, 102, 250, 0.1);
      color: #0066fa;
      margin-right: 28px;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      white-space: nowrap;
      &_act {
        background: rgba(112, 197, 69, 0.1);
        color: #70c545;
      }
    }
    .ss_box_con_title_box {
      width: 80px;
      height: 34px;
      margin-right: 28px;
    }
    .ss_box_con_con_label {
      width: 90px;
    }
  }
}
.contextmenu {
  margin: 0;
  background: #fff;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  z-index: 999999;
  min-width: 100px;
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    text-align: center;
    &:hover {
      background: #eee;
      color: #0066fa;
    }
  }
}
</style>
